<template>
  <div class="inspectionlist">
    <div class="inspectionlist_left">
      <div class="title">检验项目</div>
      <ul>
        <el-scrollbar height="400px">
          <li
            class="list"
            :class="{ active: inspectionStyle === index }"
            v-for="(item, index) in list"
            :key="index"
            @click="onInspection(item, index)"
          >
            <div class="number">{{ index + 1 }}</div>
            <div class="name">{{ item.inspectionCategory }}</div>
            <div class="time">{{ item.inspectionRptDate }}</div>
          </li>
        </el-scrollbar>
      </ul>
    </div>
    <div class="inspectionlist_right">
      <div class="top">
        <div class="ipt">
          <el-input v-model="inspectValue" style="width: 240px" @input="onipt">
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </div>

        <div class="msg">
          <div class="time">
            <div class="name">采样时间:</div>
            <div class="content">{{ inspectionSpecimendate || "--" }}</div>
          </div>
          <div class="time">
            <div class="name">报告时间:</div>
            <div class="content">{{ inspectionRptDate || "--" }}</div>
          </div>
        </div>
      </div>

      <div class="table">
        <Table
          :columnList="columnList"
          :tableData="tableData"
          :header="header"
          :fristSlot="true"
        >


        
        <template v-slot:inspectionRefRange="{ row }">
            <div>{{he.decode(row.inspectionRefRange)}}</div>
        </template>


          <template v-slot:reportResult="{ row }">
            <div round class="tag_1">
              <div class="result">
                {{ row.reportResult }}
              </div>
              <div class="svg">
                <span v-if="row.reportAbnormal == 'L'">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="6"
                    height="11"
                    viewBox="0 0 6 11"
                    fill="none"
                  >
                    <path
                      d="M3 11L-1.16237e-06 8.55556L2 8.55556L2 -2.78696e-07L4 -1.39348e-07L4 8.55556L6 8.55556L3 11Z"
                      fill="#F6685D"
                    />
                  </svg>
                </span>
                <span v-if="row.reportAbnormal == 'M'"> </span>
                <span v-if="row.reportAbnormal == 'H'">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="6"
                    height="11"
                    viewBox="0 0 6 11"
                    fill="none"
                  >
                    <path
                      d="M3 0L6 2.44444H4V11H2V2.44444H0L3 0Z"
                      fill="#F6685D"
                    />
                  </svg>
                </span>
              </div>
            </div>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script setup>
import Table from "@/components/Table/table.vue";
import { onMounted, nextTick, watch ,inject } from "vue";
import he from 'he';
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },

  columnList: {
    type: Array,
    default: [],
  },
});

const inspectionStyle = ref(0);
const inspectionSpecimendate = ref(""); //采样时间
const inspectionRptDate = ref(""); //报告时间
const inspectValue = ref();

const reset = () => {

};
watch(
 
);

const tableData = ref();
const onInspection = (item, index) => {
  inspectionStyle.value = index;
  tableData.value = item.items || [];
};

onMounted(() => {
  reset();
});
defineExpose({
  reset,


});
</script>
<style scoped lang="scss">
.inspectionlist {
  display: flex;
  padding: 0 16px;
  .inspectionlist_left {
    width: 24%;
    margin-right: 24px;
    .title {
      border-radius: 6px 6px 0px 0px;
      // background: rgba(255, 255, 255, 0.1);
      color: var(--Gray-White, #fff);
      font-family: "Microsoft YaHei";
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 50px; /* 137.5% */
      height: 50px;
      text-align: center;
    }
    ul {
      .list {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        height: 60px;
        // line-height: 60px;
        color: var(--Gray-Gray5, #c5c5c5);
        .number {
          width: 10%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .time {
          width: 40%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .name {
          display: flex;
          align-items: center;
          width: 48%;
          flex-wrap: wrap;
          justify-content: left;
        }
      }

      .list:hover {
        // background: rgba(255, 255, 255, 0.1);
      }
      .active {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
      }
    }
  }
  .inspectionlist_right {
    .tag_1{
      display: flex;
      justify-content: center;
      .result{
        width: 50px;
      }
      .svg{
        width: 20px;
        margin:0 0 0 5px;
      }
    }
    width: 85%;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .ipt {
      }
      .msg {
        display: flex;

        .time {
          display: flex;
          align-items: center;

          height: 50px;
          margin-left: 10px;
          .name {
            color: var(--Gray-Gray8, #777);
            font-family: "Microsoft YaHei";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px; /* 157.143% */
            margin-right: 3px;
          }
          .content {
            color: var(--Gray-Gray4-, #dcdcdc);
            font-family: "Microsoft YaHei";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px; /* 157.143% */
          }
        }
      }
    }
  }
}
::v-deep(.el-table__empty-block) {
  background: #222;
}
:deep(.el-input__wrapper) {
  background: #222222;
}
:deep(.el-input__inner) {
  color: #fff;
}
:deep(.el-input .el-input__icon) {
  color: #fff;
}
</style>
